<template>
  <div class="box" id="box">
    <header class="header">
      <div class="a1">
        <img src="/static/imgs_s10/S_10order1.08.png" alt />
        <div></div>
        <!-- <span>请输入商品名称</span> -->
        <input type="text" v-model="proName" placeholder="请输入商品名称" />
      </div>
      <div class="a2">
        <span @click="search">搜索</span>
      </div>
    </header>
    <section>
      <ul class="ul1">
        <view class="page-section-spacing">
          <scroll-view scroll-y="true" style="height: 426px;" scroll-with-animation="true">
            <li :class="curIndex===0? 'active': ''" @click="clickItem(0,'')">
              <p></p>
              <span>全部</span>
              <div v-if="total.totalNum != 0" class="numCss">{{ total.totalNum }}</div>
            </li>
            <li
              v-for="(category,index) in categoryList"
              :key="index"
              :class="curIndex===index + 1? 'active': ''"
              @click="clickItem(index + 1, category.id)"
            >
              <p></p>
              <span>{{category.name}}</span>
              <div v-if="category.num != 0" class="numCss">{{ category.num }}</div>
            </li>
          </scroll-view>
        </view>
      </ul>
      <ul class="ul2">
        <view class="page-section-spacing">
          <scroll-view scroll-y="true" style="height: 426px;" scroll-with-animation="true">
            <li class="li1">{{ curIndex == 0 ? "全部" : categoryList[curIndex - 1].name }}</li>
            <li class="li2" v-for="(product,index) in productList" :key="index">
              <img src="/static/imgs_s10/S_10order1.01.png" alt />
              <div class="b1">
                <p class="p1" v-show="product.promotionPrice">
                  <span>特价</span>
                </p>
                <p class="p2">{{ product.name }}</p>
                <p class="p3">月售{{ product.sale }}</p>
                <p class="p4" v-show="product.promotionPrice">原价:¥{{ product.price }}/份</p>
                <p class="p4" v-show="!product.promotionPrice"></p>
                <p
                  class="p5"
                >¥{{ product.promotionPrice ? product.promotionPrice : product.price }}/份</p>
              </div>
              <div class="b2">
                <div v-for="(cart,i) in cartList" :key="i">
                  <div v-if="cart.productId == product.id">
                    <img class="img1" src="/static/png/minus.png" @click="minusNum(product)" alt />
                    <span class="span2">{{ cart.quantity }}</span>
                  </div>
                </div>

                <img class="img2" @click="addNum(product)" src="/static/png/add.png" alt />
              </div>
            </li>
          </scroll-view>
        </view>
      </ul>
    </section>
    <div class="cart-icon" :class="cartCss?'cart-icon2': ''" @click.stop="cartToggle">
      <img class="footer-imgs1" id="imgs" src="/static/imgs_s10/S_10order1.06.png" alt />
      <span v-if="total.totalNum != 0" class="span-1">{{ total.totalNum }}</span>
    </div>
    <footer>
      <div class="div1">
        <span class="span1">合计</span>
        <span class="span2">￥{{ total.totalMoney }}</span>
      </div>
      <div class="div2" @click="chooseOver">选好了</div>
    </footer>

    <!-- 购物车页面 -->
    <!-- 蒙版 -->
    <div class="mask" id="mask" v-if="cartFlag" @click="closkMask"></div>
    <div class="cart" id="cart" v-if="cartFlag">
      <!-- <img class="imgs-1" id="imgs-1" src="/static/imgs_s10/S_10order1.06.png" alt /> -->
      <div class="c">
        <div class="c1">
          <img
            class="c1-imgs1"
            @click="checkAll"
            :src="checkFlag ? '/static/imgs_s10/S_10order2.03.png' : '/static/imgs_s10/S_10order2.02.png'"
            alt
          />
          <span class="c1-span1">全选</span>
          <span class="c1-span2">（已选{{ checkNum }}种）</span>
          <div @click="empty">
            <img class="c1-imgs2" src="/static/imgs_s10/S_10order2.01.png" alt />
            <span class="c1-span3">清空购物车</span>
          </div>
        </div>
        <view class="page-section-spacing">
          <scroll-view scroll-y="true" style="height: 300px;" scroll-with-animation="true">
            <div class="c2" v-for="(cart,index) in cartList" :key="index">
              <img
                class="c2-imgs1"
                @click="isCheck(cart)"
                :src="cart.check ? '/static/imgs_s10/S_10order2.02.png' : '/static/imgs_s10/S_10order2.03.png'"
                alt
              />
              <img class="c2-imgs2" src="/static/imgs_s10/S_10order1.01.png" alt />
              <div class="c2-div1">
                <span class="c2-span1">{{ cart.productName }}</span>
                <br />
                <span class="c2-span2">¥{{ cart.price | numFormat }}</span>
              </div>
              <div class="c2-div2">
                <img
                  class="c2-div2-span1"
                  src="/static/png/minus.png"
                  @click="minusCartNum(cart.productId)"
                  alt
                />
                <span class="c2-div2-span3">{{ cart.quantity }}</span>
                <img
                  class="c2-div2-span4"
                  src="/static/png/add.png"
                  @click="addCartNum(cart.productId)"
                  alt
                />
              </div>
            </div>
          </scroll-view>
        </view>
      </div>
    </div>

    <div class="mask2" v-if="isClose"></div>
    <div class="closeLogo" v-if="isClose">
      <img src="/static/imgs_s01/s01_clock.png" alt />
      <div @click="closeModel">
        <p>亲！小店打烊啦，下次早点哦！</p>
        <span>好的</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shopId: 1,
      userId: 1,
      shopStatus: "",
      shoppingWay:"",
      proName: "",
      categoryId: "",
      categoryList: [],
      productList: [],
      // 留作购物车使用
      productList2: [],
      cartList: [],

      curIndex: 0,
      cartFlag: false,
      cartCss: true,
      total: {
        totalNum: 0,
        totalMoney: 0
      },

      checkFlag: true,
      tempMoney: 0,
      checkNum: 0,

      isClose: false
    };
  },

  methods: {
    search() {
      wx.request({
        url: 'http://localhost:7777/prom/listProduct?currency=0&shopId='+this.shopId +'&pname='+this.proName, //开发者服务器接口地址",
        data: 'data', //请求的参数",
        method: 'GET',
        loading:false,
        dataType: 'json', //如果设为json，会尝试对返回的数据做一次 JSON.parse
        success: res => {
          this.curIndex = 0;
          this.productList = res.data;
        },
        fail: () => {},
        complete: () => {}
      });
    },
    clickItem(i, cid) {
      this.curIndex = i;
      this.categoryId = cid;
      wx.request({
        url: 'http://localhost:7777/prom/listProduct?currency=0&shopId='+this.shopId +'&categoryId=' +cid, //开发者服务器接口地址",
        data: 'data', //请求的参数",
        method: 'GET',
        loading:false,
        dataType: 'json', //如果设为json，会尝试对返回的数据做一次 JSON.parse
        success: res => {
          this.productList = res.data;
        },
        fail: () => {},
        complete: () => {}
      });
    },
    cartToggle() {
      this.cartFlag = !this.cartFlag;
      this.cartCss = !this.cartCss;

      this.checkFlag = true;
      if (this.cartList.length == 0) {
        this.checkFlag = false;
      }
      this.cartList.filter(item => {
        item.check = false;
      });

      if (this.cartFlag) {
        // 打开遮挡层
        this.tempMoney = this.total.totalMoney;

        this.checkNum = this.cartList.length;
      } else {
        // 收回遮挡层
        this.total.totalMoney = this.tempMoney;
      }
    },
    closkMask() {
      this.cartFlag = false;
      this.cartCss = true;
      this.total.totalMoney = this.tempMoney;

      this.cartList.filter(item => {
        item.check = false;
      });
    },
    addNum(pro) {
      this.updateNum(pro, "add");
    },
    minusNum(pro) {
      this.updateNum(pro, "minus");
    },
    updateNum(pro, opt) {
      let url = "";
      let data = {};
      if (opt == "add") {
        url = "http://localhost:7777/cartm/cartItem/add?shopId="+ this.shopId+"&memberId=1&productId="+pro.id+"&productPic=null&productName="+pro.name+"&productCategoryId="
          +pro.categoryId+"&price="+pro.promotionPrice;
      } else {
        url = "http://localhost:7777/cartm/cartItem/minus?shopId="+this.shopId+"&memberId=1&productId="+pro.id;
      }
      wx.request({
        url: url, //开发者服务器接口地址",
        //data: 'data', //请求的参数",
        method: 'put',
        loading:false,
        dataType: 'json', //如果设为json，会尝试对返回的数据做一次 JSON.parse
        success: res => {
          this.getCartList();
          this.clickItem(this.curIndex, this.categoryId);
        },
        fail: () => {
          console.log("shibaile ");
        },
        complete: () => {}
      });
    },
    addCartNum(proId) {
      this.productList2.filter(item => {
        if (item.id == proId) {
          this.addNum(item);
        }
      });
    },
    minusCartNum(proId) {
      this.productList2.filter(item => {
        if (item.id == proId) {
          this.minusNum(item);
        }
      });
    },
    // 查询该店铺所有商品信息
    getProList() {
      wx.request({
        url: 'http://localhost:7777/prom/listProduct?currency=0&shopId=' + this.shopId, //开发者服务器接口地址",
        data: 'data', //请求的参数",
        method: 'GET',
        loading:false,
        dataType: 'json', //如果设为json，会尝试对返回的数据做一次 JSON.parse
        success: res => {
          this.productList = res.data;
        this.productList2 = res.data;
        },
        fail: () => {},
        complete: () => {}
      });
    },
    // 根据店铺和种类查询购物车信息
    getCartList() {
      wx.request({
        url: 'http://localhost:7777/cartm/cartItem/list?memberId='+this.userId+'&shopId='+this.shopId, //开发者服务器接口地址",
        data: 'data', //请求的参数",
        method: 'GET',
        dataType: 'json', //如果设为json，会尝试对返回的数据做一次 JSON.parse
        success: res => {
            this.cartList = res.data;
            this.checkNum = this.cartList.length;
            this.showNum();
        },
        fail: () => {
          this.cartList = [];
            this.categoryList.filter(item => {
              item.num = 0;
            });
            this.total.totalNum = 0;
            this.total.totalMoney = 0;
        },
        complete: () => {}
      });
      // wx.request({
      //   url: "http://localhost:7777/cartm/cartItem/list",
      //   method: "POST",
      //   data: { shopId: this.shopId, memberId: this.userId },
      //   header: {
      //     "userId": this.userId,
      //     "skey": wx.getStorageSync('skey')
      //   },
      //   success: ({ data }) => {
      //     if (data.code == 200) {
      //       this.cartList = data.data;
      //       this.checkNum = this.cartList.length;
      //       this.showNum();
      //     } else {
      //       this.cartList = [];
      //       this.categoryList.filter(item => {
      //         item.num = 0;
      //       });
      //       this.total.totalNum = 0;
      //       this.total.totalMoney = 0;
      //     }
      //   },
      //   fail: err => {
      //     console.log(err);
      //   }
      // });
    },
    showNum() {
      this.total.totalNum = 0;
      this.total.totalMoney = 0;
      this.tempMoney = 0;
      if (this.categoryList.length != 0) {
        this.categoryList.filter(item => {
          item.num = 0;
          let proTypeList = [];
          this.cartList.filter(cart => {
            if (cart.productCategoryId == item.id) {
              proTypeList.push(cart);
            }
          });
          proTypeList.filter(proType => {
            item.num += proType.quantity;
          });
          this.total.totalNum += item.num;
        });
      }

      this.cartList.filter(item => {
        this.total.totalMoney += item.quantity * item.price;
        this.tempMoney += item.quantity * item.price;
      });
    },
    // 勾选所有
    checkAll() {
      this.checkFlag = !this.checkFlag;
      this.cartList.filter(item => {
        item.check = !this.checkFlag;
      });

      if (this.checkFlag) {
        this.total.totalMoney = this.tempMoney;
      } else {
        this.total.totalMoney = 0;
      }

      this.checkNum =
        this.checkNum == this.cartList.length ? 0 : this.cartList.length;
    },
    // 勾选单个
    isCheck(cart) {
      let flag = true;
      cart.check = !cart.check;
      this.total.totalMoney = 0;
      this.checkNum = 0;
      this.cartList.filter(item => {
        if (item.check) {
          flag = false;
        } else {
          this.total.totalMoney += item.price * item.quantity;
          this.checkNum++;
        }
      });
      this.checkFlag = flag;
    },
    // 清空购物车
    empty(list) {
      this.tempMoney = 0;
      this.checkNum = 0;
      this.checkAll = false;

      wx.request({
        url: 'http://localhost:7777/cartm/cartItem/delete?shopId='+this.shopId+"&memberId="+this.userId, //开发者服务器接口地址",
        data: 'data', //请求的参数",
        method: 'delete',
        loading:false,
        dataType: 'json', //如果设为json，会尝试对返回的数据做一次 JSON.parse
        success: res => {
          this.getCartList();
          this.checkFlag = false;
        },
        fail: () => {},
        complete: () => {}
      });
    },
    // 获取店铺状态
    getItem(key) {
      return wx.getStorageSync(key) ? wx.getStorageSync(key) : "不存在";
    },
    // 选好了
    chooseOver() {
      if (this.shopStatus == "营业中") {
        let num = 0;
        this.cartList.filter(item => {
          if (!item.check) {
            num++;
          }
        });
        if (num > 0) {
          if (num != this.cartList.length) {
            let tempList = [];
            this.cartList.filter(item => {
              if (item.check) {
                tempList.push(item);
              }
            });
            this.empty(tempList);
          }
          if(this.shoppingWay == 0) {
            wx.navigateTo({ url: "/pages/s10_Takeaway03-1/main?shoppingWay=" + this.shoppingWay });
          } else {
            wx.navigateTo({ url: "/pages/s01_tangshixd/main?shoppingWay=" + this.shoppingWay });
          }
          
        } else {
          // 未选择任何商品
          wx.showModal({
            // title: '选择商品',
            content: "未选择任何商品",
            showCancel: false,
            confirmColor: "#67C23A"
          });
        }
      } else {
        // 弹出打烊窗口
        this.isClose = true;
      }
    },
    closeModel() {
      this.isClose = false;
    }
  },

  onLoad(data) {
    this.shoppingWay = data.shoppingWay;
  },

  mounted() {
    this.shopStatus = "营业中";
    // this.shopStatus = this.getItem('status');
    // 查询该店铺所有商品信息
    this.getProList();
    // 查询该店铺所有种类信息
      wx.request({
        url: 'http://localhost:7777/prom/listCategory?shopId='+ this.shopId, //开发者服务器接口地址",
        data: 'data', //请求的参数",
        method: 'GET',
        loading:false,
        dataType: 'json', //如果设为json，会尝试对返回的数据做一次 JSON.parse
        success: res => {
          this.categoryList = res.data;
          this.categoryList.filter(item => {
              item.num = 0;
              });
        },
        fail: () => {},
        complete: () => {}
      });
    // 根据店铺和种类查询购物车信息
    this.getCartList();
  },
  computed: {
    // checkNum() {
    //   let num = 0;
    //   this.cartList.filter(item => {
    //     if (!item.check || item.check == undefined) {
    //       num++;
    //     }
    //   });
    //   return num;
    // }
  },
  filters: {
    numFormat(value) {}
  }
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  position: relative;
  background: rgba(247, 247, 247, 1);
}

/* 顶部区块 */
.header {
  position: absolute;
  left: 0;
  height: 0;
  display: flex;
  align-items: center;
  width: 375px;
  height: 48px;
  background: rgba(255, 255, 255, 1);
}

.header .a1 {
  margin-left: 17px;
  width: 299px;
  height: 33px;
  background: rgba(247, 247, 247, 1);
  border-radius: 17px;
  display: flex;
  align-items: center;
}

.header .a2 {
  margin-left: 15px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
}

.header .a1 img {
  margin-left: 12px;
  width: 12px;
  height: 12px;
}

.header .a1 div {
  margin-left: 13px;
  width: 2px;
  height: 13px;
  background: rgba(50, 177, 108, 1);
  border-radius: 1px;
}

.header .a1 span {
  margin-left: 4px;
  width: 97px;
  height: 12px;
  line-height: 12px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(158, 158, 158, 1);
}

/* 中间区块左部分 */
section .ul1 {
  position: absolute;
  left: 0;
  top: 48px;
  background-color: rgb(244, 244, 244);
  height: 500px;
}

section .ul1 li {
  /* position: absolute; */
  /* left: 14px; */
  position: relative;
  width: 88px;
  height: 40px;
  line-height: 40px;
  padding-left: 15px;
  text-align: left;
  font-size: 13px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  box-sizing: border-box;
}

section .ul1 li.active {
  background-color: white;
}

section .ul1 li.active p {
  position: absolute;
  left: 0;
  top: 14px;
  width: 3px;
  height: 13px;
  background: rgba(50, 177, 108, 1);
}

section .ul1 li .numCss {
  position: absolute;
  /* left: 55px; */
  right: 10px;
  top: 4px;
  width: 17px;
  height: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(241, 145, 73, 1);
  border-radius: 50%;
  color: white;
  font-size: 10px;
  z-index: 20;
}

/* 中右 */
section .ul2 {
  position: absolute;
  left: 79px;
  top: 48px;
  width: 296px;
  height: 500px;
  background: rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: column;
}

section .ul2 li {
  display: flex;
  flex-direction: row;
  margin-top: 17px;
  width: 296px;
  height: 85px;
}

section .ul2 .li1 {
  width: 286px;
  height: 12px;
  margin-top: 14px;
  margin-left: 10px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 10px;
}

section .ul2 li img {
  margin-left: 10px;
  margin-right: 10px;
  width: 85px;
  height: 85px;
}

/* 图右 */
section .ul2 li .p1 {
  width: 30px;
  height: 13px;
  background: rgba(228, 41, 56, 1);
  border-radius: 3px;
  text-align: center;
  line-height: 13px;
  font-size: 9px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}
section .ul2 li .p2 {
  width: 100px;
  height: 12px;
  font-size: 13px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}

section .ul2 li .p3 {
  width: 40pxpx;
  height: 10px;
  font-size: 10px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
}

.p4 {
  width: 100px;
  height: 11px;
  font-size: 11px;
  margin-top: 6px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  text-decoration: line-through;
  color: rgba(163, 165, 168, 1);
}

.b1 .p2,
.b3 .p2 {
  margin-top: 8px;
}

.b5 .p2,
.b7 .p2,
.b9 .p2 {
  margin-top: 5px;
}

.b1 .p3,
.b3 .p3 {
  margin-top: 5px;
}

.b5 .p3,
.b7 .p3,
.b9 .p3 {
  margin-top: 11px;
}

.b1 .p5 {
  margin-top: 5px;
  color: rgb(232, 93, 80);
}

.b5 .p5,
.b7 .p5,
.b9 .p5 {
  margin-top: 28px;
}

.b2,
.b4,
.b6,
.b8,
.b10 {
  position: relative;
  margin-left: 20px;
  margin-top: 67px;
  width: 74px;
  height: 21px;
  display: flex;
  justify-content: space-between;
}

section .ul2 li .b2 .img1,
section .ul2 li .b4 .img1,
section .ul2 li .b6 .img1,
section .ul2 li .b8 .img1,
section .ul2 li .b10 .img1 {
  position: absolute;
  left: 0px;
  top: -5px;
  width: 21px;
  height: 21px;
  margin: 0;
  padding: 0;
}

.b2 .span3,
.b4 .span3,
.b6 .span3,
.b8 .span3,
.b10 .span3 {
  position: absolute;
  right: 0;
  top: 0;
  width: 21px;
  height: 21px;
  background: rgba(50, 177, 108, 1);
  border-radius: 50%;
}

section .ul2 li .b2 .img2,
section .ul2 li .b4 .img2,
section .ul2 li .b6 .img2,
section .ul2 li .b8 .img2,
section .ul2 li .b10 .img2 {
  position: absolute;
  right: 0;
  top: -5px;
  width: 21px;
  height: 21px;
  margin: 0;
  padding: 0;
  z-index: 1;
}

.b2 .span1,
.b4 .span1,
.b6 .span1,
.b10 .span1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 21px;
  height: 21px;
  border: 1px solid rgba(218, 219, 222, 1);
  border-radius: 50%;
}

.b2 .span2,
.b4 .span2,
.b6 .span2,
.b8 .span2,
.b10 .span2 {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -80%);
  width: 4px;
  height: 10px;
  font-size: 14px;
  font-weight: bold;
  color: rgba(44, 44, 47, 1);
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 375px;
  height: 45px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 0px 0px rgba(237, 237, 237, 1);
  z-index: 30;
}

.cart-icon {
  position: absolute;
  top: 160px;
  left: 20px;
  z-index: 100;
}

.cart-icon.cart-icon2 {
  top: 580px;
}

.cart-icon img {
  position: absolute;
  left: 7px;
  bottom: 5px;
  width: 56px;
  height: 56px;
}

.cart-icon .span-1 {
  position: absolute;
  left: 46px;
  bottom: 42px;
  width: 17px;
  height: 17px;
  background: rgba(241, 145, 73, 1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}

footer .div1 {
  position: absolute;
  left: 138px;
  top: 18px;
  width: 120px;
  height: 20px;
}

footer div .span1 {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}

footer div .span2 {
  font-size: 14px;
  font-weight: 400;
  color: #e85b4d;
}

footer .div2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 127px;
  height: 45px;
  background: rgba(50, 177, 108, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}

/* 购物车页面 */
.mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 375px;
  /* height: 217px; */
  height: 550px;
  background: rgba(221, 221, 221, 0.8);
  /* display: none; */
  z-index: 20;
}

.cart {
  /* display: none; */
  position: fixed;
  bottom: 45px;
  z-index: 90;
}

.cart .span-1 {
  position: absolute;
  left: 54px;
  top: 146px;
  width: 17px;
  height: 17px;
  background: rgba(241, 145, 73, 1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}

.cart .c {
  /* position: absolute;
  left: 0;
  top: 217px; */
  width: 375px;
  height: 404px;
  background: rgba(255, 255, 255, 1);
  border-radius: 6px 6px 0px 0px;
  display: flex;
  flex-direction: column;
}

.c1 {
  /* position: absolute;
    left: 0;
    top: 0; */
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 375px;
  height: 44px;
}

.c1 .c1-imgs1 {
  margin-left: 13px;
  width: 18px;
  height: 18px;
}

.c1 .c1-span1 {
  margin-left: 15px;
  width: 25px;
  height: 11px;
  line-height: 11px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(37, 37, 37, 1);
}

.c1 .c1-span2 {
  margin-left: 8px;
  width: 70px;
  height: 12px;
  line-height: 12px;
  font-size: 11px;
  font-weight: 400;
  color: rgba(163, 165, 168, 1);
}

.c1 .c1-imgs2 {
  margin-left: 140px;
  width: 13px;
  height: 13px;
}

.c1 .c1-span3 {
  margin-left: 3px;
  width: 60px;
  height: 11px;
  line-height: 11px;
  font-size: 11px;
  font-weight: 400;
  color: rgba(163, 165, 168, 1);
}

.c2,
.c3,
.c4,
.c5 {
  position: relative;
  margin-top: 21px;
  width: 375px;
  height: 69px;
  display: flex;
  flex-direction: row;
}

.c2 {
  margin-top: 7px;
}

/* 第一列图 */
.c2-imgs1,
.c3-imgs1,
.c4-imgs1,
.c5-imgs1 {
  margin-left: 13px;
  margin-top: 26px;
  width: 18px;
  height: 18px;
}

/* 食品图 */
.c2-imgs2,
.c3-imgs2,
.c4-imgs2,
.c5-imgs2 {
  margin-left: 17px;
  margin-top: 0px;
  width: 69px;
  height: 69px;
}

/* 图右字 */
.c2-div1,
.c3-div1,
.c4-div1,
.c5-div1 {
  margin-left: 8px;
  margin-top: 4px;
  width: 100px;
  height: 39px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.c2-span1,
.c3-span1.c4-span1.c5-span1 {
  margin-top: 4px;
  font-size: 14px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}

.c2-span2,
.c3-span2,
.c4-span2,
.c5-span2 {
  margin-top: 14px;
  font-size: 13px;
  font-weight: bold;
  color: rgba(232, 91, 77, 1);
}

/* 加减号 */
.c2-div2,
.c3-div2,
.c4-div2,
.c5-div2 {
  position: absolute;
  left: 294px;
  bottom: 0;
  width: 62px;
  height: 21px;
}

.c2-div2-span1,
.c3-div2-span1,
.c4-div2-span1,
.c5-div2-span1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 21px;
  height: 21px;
}

/* 减号的横 */
.c2-div2-span2,
.c3-div2-span2,
.c4-div2-span2,
.c5-div2-span2 {
  position: absolute;
  left: 5px;
  top: 10px;
  width: 12px;
  height: 2px;
  background: rgba(176, 176, 176, 1);
  border-radius: 1px;
  z-index: 10;
}

.c2-div2-span3,
.c3-div2-span3,
.c4-div2-span3,
.c5-div2-span3 {
  position: absolute;
  left: 28px;
  height: 5px;
  font-size: 14px;
  font-weight: bold;
  color: rgba(44, 44, 47, 1);
  line-height: 20px;
}

/* 加号背景 */
.c2-div2-span4,
.c3-div2-span4,
.c4-div2-span4,
.c5-div2-span4 {
  position: absolute;
  right: 0;
  top: 0;
  width: 21px;
  height: 21px;
  /* background: rgba(50, 177, 108, 1);
  border-radius: 50%; */
}

/* 十字的竖 */
.c2-div2-span5,
.c3-div2-span5,
.c4-div2-span5,
.c5-div2-span5 {
  position: absolute;
  left: 50px;
  bottom: 4px;
  width: 2px;
  height: 12px;
  background: rgba(255, 255, 255, 1);
  border-radius: 1px;
  z-index: 10;
}

/* 加号的横 */
.c2-div2-span6,
.c3-div2-span6,
.c4-div2-span6,
.c5-div2-span6 {
  position: absolute;
  left: 45px;
  top: 10px;
  width: 12px;
  height: 2px;
  background: rgba(255, 255, 255, 1);
  border-radius: 1px;
  z-index: 10;
}

.d {
  position: absolute;
  left: 0;
  top: 621px;
  width: 375px;
  height: 45px;
  z-index: 20;
}

.d-span1 {
  position: absolute;
  left: 10px;
  top: 17px;
  font-size: 14px;
  width: 50px;
  height: 13px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  line-height: 13px;
}

.d-span2 {
  position: absolute;
  left: 50px;
  top: 17px;
  width: 50px;
  height: 13px;
  line-height: 13px;
  font-size: 14px;
  color: #e85b4d;
}

.d-span3 {
  position: absolute;
  right: 0;
  top: 0;
  width: 127px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  background: rgba(50, 177, 108, 1);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}

/* 打烊遮挡层 */
.mask2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 375px;
  /* height: 217px; */
  height: 550px;
  background: rgba(221, 221, 221, 0.8);
  /* display: none; */
  z-index: 101;
}

.closeLogo {
  position: relative;
  width: 100%;
  height: 675px;
  background-color: #ddd;
  z-index: 102;
}

.closeLogo img {
  position: absolute;
  top: 186px;
  left: 150px;
  width: 75px;
  height: 75px;
  z-index: 55;
}

.closeLogo div {
  position: absolute;
  top: 222px;
  left: 55px;
  width: 266px;
  height: 169px;
  background: rgba(255, 255, 255, 1);
  border-radius: 15px;
  z-index: 1;
}

.closeLogo div p {
  margin-left: 37px;
  margin-top: 73px;
  margin-bottom: 35px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}

.closeLogo div span {
  margin-left: 119px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(69, 189, 142, 1);
}
</style>
